<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于系统 - AI治疗师</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4A90A4;
            --secondary-color: #F5F3F0;
            --accent-color: #2E7D32;
            --warning-color: #FF8A65;
            --text-dark: #2C3E50;
            --text-light: #7F8C8D;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--secondary-color) 0%, #E8F4F8 100%);
            min-height: 100vh;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .content-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(74, 144, 164, 0.1);
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        }
        
        .team-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="text-gray-800">
    
    <!-- Navigation -->
    <nav class="bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">🤖</span>
                    </div>
                    <span class="text-xl font-semibold text-gray-800">AI治疗师</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">治疗对话</a>
                    <a href="monitoring.html" class="text-gray-600 hover:text-blue-600 transition-colors">情绪监测</a>
                    <a href="crisis.html" class="text-gray-600 hover:text-blue-600 transition-colors">危机支持</a>
                    <a href="support.html" class="text-gray-600 hover:text-blue-600 transition-colors">专业支持</a>
                    <a href="about.html" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1">关于系统</a>
                </div>
                <button class="md:hidden p-2 rounded-md text-gray-600 hover:text-blue-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Header -->
    <section class="pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h1 class="hero-title text-4xl md:text-5xl font-bold mb-4 opacity-0" id="main-title">
                    关于AI治疗师
                </h1>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-6 opacity-0" id="subtitle">
                    专业的人工智能心理健康支持系统，基于循证医学，为您提供安全、私密、有效的心理健康服务
                </p>
            </div>
        </div>
    </section>

    <!-- System Overview -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="content-card rounded-2xl p-8 mb-8">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800 mb-4">系统概述</h2>
                    <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                        AI治疗师是一个基于人工智能技术的专业心理健康支持平台，结合了自然语言处理、
                        情感分析和认知行为疗法等先进技术，为用户提供个性化的心理健康服务。
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="text-center">
                        <div class="feature-icon w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">🧠</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">智能对话</h3>
                        <p class="text-sm text-gray-600">基于深度学习的自然语言处理技术，理解用户情感和困扰</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="feature-icon w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">📊</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">情感分析</h3>
                        <p class="text-sm text-gray-600">实时分析用户情绪状态，提供个性化的情绪监测和反馈</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="feature-icon w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">🎯</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">个性化治疗</h3>
                        <p class="text-sm text-gray-600">基于认知行为疗法和正念疗法，提供个性化的治疗建议</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="feature-icon w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">🛡️</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">危机干预</h3>
                        <p class="text-sm text-gray-600">24/7危机检测和紧急支持系统，确保用户安全</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technology Stack -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                
                <!-- Technology -->
                <div class="content-card rounded-2xl p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">技术架构</h2>
                    
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-3">前端技术</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Vue 3</span>
                                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Tailwind CSS</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Anime.js</span>
                                <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">ECharts</span>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-3">后端技术</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Python/FastAPI</span>
                                <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">PostgreSQL</span>
                                <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">WebSocket</span>
                                <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">Redis</span>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-3">AI/ML技术</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-teal-100 text-teal-800 rounded-full text-sm">BERT</span>
                                <span class="px-3 py-1 bg-cyan-100 text-cyan-800 rounded-full text-sm">Transformers</span>
                                <span class="px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-sm">VADER</span>
                                <span class="px-3 py-1 bg-violet-100 text-violet-800 rounded-full text-sm">Hugging Face</span>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-3">安全与隐私</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">端到端加密</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">HIPAA合规</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">匿名化处理</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">本地存储</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Privacy Policy -->
                <div class="content-card rounded-2xl p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">隐私保护政策</h2>
                    
                    <div class="space-y-4 text-sm text-gray-600">
                        <div>
                            <h3 class="text-base font-semibold text-gray-800 mb-2">数据收集</h3>
                            <p>我们仅在用户明确同意的情况下收集必要的个人信息，所有对话内容都经过加密处理，确保用户隐私安全。</p>
                        </div>
                        
                        <div>
                            <h3 class="text-base font-semibold text-gray-800 mb-2">数据使用</h3>
                            <p>收集的数据仅用于提供心理健康服务，不会用于商业目的或第三方共享。用户可以随时删除自己的数据。</p>
                        </div>
                        
                        <div>
                            <h3 class="text-base font-semibold text-gray-800 mb-2">数据安全</h3>
                            <p>采用行业标准的加密技术保护用户数据，定期进行安全审计，确保系统的安全性和可靠性。</p>
                        </div>
                        
                        <div>
                            <h3 class="text-base font-semibold text-gray-800 mb-2">用户权利</h3>
                            <p>用户拥有数据的完全控制权，可以随时查看、修改或删除个人信息，我们不会保留任何备份。</p>
                        </div>
                        
                        <div>
                            <h3 class="text-base font-semibold text-gray-800 mb-2">法律合规</h3>
                            <p>严格遵守相关法律法规，包括《网络安全法》、《个人信息保护法》等，确保服务的合法合规。</p>
                        </div>
                    </div>
                    
                    <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                        <h4 class="font-semibold text-blue-800 mb-2">重要提醒</h4>
                        <p class="text-sm text-blue-700">
                            本系统不能替代专业医疗建议。如果您有严重的心理健康问题，
                            请立即联系专业的医疗人员或拨打心理危机热线。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">专业团队</h2>
                <p class="text-lg text-gray-600">由心理健康专家、AI研究者和软件工程师组成的专业团队</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="team-card rounded-2xl p-6 text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl">👨‍⚕️</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">心理健康专家</h3>
                    <p class="text-sm text-gray-600 mb-3">临床心理学博士，10年心理治疗经验</p>
                    <div class="text-xs text-gray-500">
                        <p>• 认知行为疗法专家</p>
                        <p>• 危机干预认证</p>
                        <p>• 正念疗法培训师</p>
                    </div>
                </div>
                
                <div class="team-card rounded-2xl p-6 text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl">👩‍💻</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">AI研究科学家</h3>
                    <p class="text-sm text-gray-600 mb-3">机器学习博士，NLP领域专家</p>
                    <div class="text-xs text-gray-500">
                        <p>• 自然语言处理专家</p>
                        <p>• 情感分析算法开发</p>
                        <p>• 深度学习架构师</p>
                    </div>
                </div>
                
                <div class="team-card rounded-2xl p-6 text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl">👨‍💼</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">软件工程师</h3>
                    <p class="text-sm text-gray-600 mb-3">全栈开发工程师，医疗系统专家</p>
                    <div class="text-xs text-gray-500">
                        <p>• 前端架构设计</p>
                        <p>• 后端系统开发</p>
                        <p>• 数据安全专家</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Information -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="content-card rounded-2xl p-8">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800 mb-4">联系我们</h2>
                    <p class="text-lg text-gray-600">有任何问题或建议，欢迎与我们联系</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">技术支持</h3>
                        <p class="text-gray-600">support@aitherapist.com</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="w-12 h-12 bg-green-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">客服热线</h3>
                        <p class="text-gray-600">400-123-4567</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="w-12 h-12 bg-purple-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">专业咨询</h3>
                        <p class="text-gray-600">expert@aitherapist.com</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-gray-400">© 2024 AI治疗师. 专业的心理健康支持系统. 保护您的隐私是我们的首要责任.</p>
            <p class="text-gray-500 text-sm mt-2">免责声明：本系统不能替代专业医疗建议，如有紧急情况请立即联系医疗专业人员</p>
        </div>
    </footer>

    <script>
        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeAnimations();
        });

        // Initialize animations
        function initializeAnimations() {
            anime.timeline({
                easing: 'easeOutExpo',
                duration: 1000
            })
            .add({
                targets: '#main-title',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: 300
            })
            .add({
                targets: '#subtitle',
                opacity: [0, 1],
                translateY: [30, 0],
                delay: 200
            }, '-=800');

            anime({
                targets: '.content-card',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: anime.stagger(200, {start: 600}),
                duration: 800,
                easing: 'easeOutExpo'
            });

            anime({
                targets: '.team-card',
                opacity: [0, 1],
                translateY: [30, 0],
                delay: anime.stagger(100, {start: 1000}),
                duration: 600,
                easing: 'easeOutExpo'
            });
        }
    </script>
</body>
</html>